﻿@model string

@{
	var themesListUrl = Url.Action("AvailableThemes", "Themes");
	if (ViewBag.ThemesListUrl != null)
	{
		themesListUrl = ViewBag.ThemesListUrl;
	}
}

@Cms.ScriptInclude("Themes/Admin/Scripts/jquery.watermark.min.js")
		   
@Html.HiddenFor(m => m)
<input type="text" id="themechooser" class="te" value="@Model" readonly="readonly" />
<img id="themechoosericon" src="@Cms.Content("Themes/Admin/Images/layout.png")" alt="Click to select theme"/>

<script type="text/javascript">
	$(document).ready(function () {
		$("#themechooser").autocomplete({
			minLength: 0,
			source: "@themesListUrl",
			select: function(event, ui) {
				$('#themechooser').val(ui.item.Name);
				if (ui.item.Description !== "") { // HACK: description is empty when theme should be inherited from site.
					$('#themechooser').prev('input:hidden').val(ui.item.Name);
				}
				else {
					$('#themechooser').prev('input:hidden').val("");
				}
				return false;
			}
		})
		.watermark('Click icon to select the theme')
		.data("autocomplete")._renderItem = function (ul, item) {
			return $("<li></li>")
				.data("item.autocomplete", item)
				.append("<a><strong>" + item.Name + "</strong><br>" + item.Description + "</a>")
				.appendTo(ul);
		};

		$('#themechoosericon').click(function() {
			$('#themechooser').autocomplete("search");
		});
	})
</script>
